<template>
    <div class="containe" style="background-color: #f0f0f0;">
        <div class="cb-banner">
            <div class="banner-box">
                <el-carousel :interval="5000" arrow="always" height="420px" v-if="indexBannerList && indexBannerList.length>0">
                    <el-carousel-item v-for="(item, index) in indexBannerList" :key="index">
                        <img
                            :src="ocresourceFile + item.carouselMap.fileShowUrl"
                            style="width: 100%; height: 100%"
                            v-if="item.carouselImgPath !=='' && item.carouselURL === ''"
                            onerror="this.src='./static/img/index/banner/01.jpg'">

                        <a :href="item.carouselURL" target="_blank" v-if="item.carouselImgPath !=='' && item.carouselURL !== ''">
                            <img
                                :src="ocresourceFile + item.carouselImgPath"
                                style="height: 100%; width: 100%"
                                onerror="this.src='./static/img/index/banner/01.jpg'">
                        </a>
                        <a
                            :href="item.carouselURL"
                            style="width: 100%; height:420px"
                            :style="'background-image: url(' + ocresourceFile + item.carouselImgPath + ')'"
                            target="_blank"></a>
                    </el-carousel-item>
                </el-carousel>
                <el-carousel :interval="5000" arrow="always" height="420px" v-else>
                    <el-carousel-item v-for="(item, index) in bannerLists" :key="index">
                        <a v-if="item.href && item.bg !=''" :style="item.bg" :href="item.href"></a>
                        <a v-else :href="item.href" :style="item.bg"></a>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <div class="cb-content">
            <div class="contents">
                <div><span class="numb">{{numobj.exNum}}</span><span class="expert">专家数量</span></div>
                <div><span class="numb">{{numobj.newsNum}}</span><span class="expert">文章数量</span></div>
                <div><span class="numb">{{numobj.problemNum}}</span><span class="expert">帖子数量</span></div>
            </div>
            <div class="contents-img">
                <nuxt-link :to="'/community/quan?topicId=45&t=u'" class="imgbox"><img src="../../static/img/sq/zy.png" alt=""><span class="titlesize">资源社群</span></nuxt-link>
                <nuxt-link :to="'/community/quan?topicId=46&t=u'" class="imgbox"><img src="../../static/img/sq/cy.png" alt=""><span class="titlesize">产业社群</span></nuxt-link>
                <nuxt-link :to="'/community/quan?topicId=47&t=u'" class="imgbox"><img src="../../static/img/sq/gy.png" alt=""><span class="titlesize">工业社群</span></nuxt-link>
                <nuxt-link :to="'/community/quan?topicId=48&t=u'" class="imgbox"><img src="../../static/img/sq/yw.png" alt=""><span class="titlesize">运维社群</span></nuxt-link>
                <nuxt-link :to="'/community/quan?topicId=49&t=u'" class="imgbox"><img src="../../static/img/sq/it.png" alt=""><span class="titlesize">IT社群</span></nuxt-link>
            </div>
        </div>
        <div class="cp-container">
            <div class="img-father"  v-loading="loading" >
                <div class="img-box">
                    <img src="../../static/img/sq/expert.png" alt="">
                    <span class="become" @click="handleJump('/community/expert')">成为专家</span>
                </div>
                <div class="img-boxs" v-for="(item,i) in exarr" :key="i" >
                    <nuxt-link :to="`/community/expert/detail/${item.createUserId}`">
                        <div class="content-img">
                            <img class="img-size" v-if="item.fileShowUrl" :src="`${file}${item.fileShowUrl}?x-oss-process=image/resize,w_${230}`" alt="">
                        </div>
                    </nuxt-link>
                    <nuxt-link :to="`/community/expert/detail/${item.createUserId}`">
                        <div class="rel-box">
                            <img class="name-img" src="../../static/img/sq/allname.png" alt="">
                            <div class="name">{{item.createUserName}}</div>
                            <span class="bj">{{item.city[0].label}}</span>
                        </div>
                    </nuxt-link>
                    <div class="adviser">
                        {{FILTER_FORMATER.wordNum(item.jobDescription,13)}}
                    </div>
                    <div class="flex flex-between">
                        <div><span>服务数量 </span><span> {{item.serviceNum||0}}</span></div>
                        <div class="score">
                            <span class="ping">评</span><span class="num">{{item.totalScore}}</span>
                        </div>
                    </div>
                </div>
                <!-- <div class="img-boxs"></div> -->
                <!-- <div class="img-boxs"></div> -->
            </div>
            <div class="more-box">
                <nuxt-link class="lookMore more" to="/community/expert">更多专家</nuxt-link>
            </div>
        </div>
        <div class="cp-container">
            <div class="img-fathers">
                <div class="img-box">
                    <img src="../../static/img/sq/article.png" alt="">
                    <span class="become" @click="handleJump('/community/article')">发布文章</span>
                </div>
                <div class="litil-img">
                    <div class="flextwo-boxs">
                        <div class="flex-boxs box-one">
                            <div class="bear" v-for="(item,ind) in recept" :key="ind">
                                <div class="imgs-boxs">
                                    <nuxt-link :to="`/community/article/detail/${item.id}`">
                                        <img class="money" v-if="item.blogNewImg" :src="`${file}${item.blogNewImg.fileShowUrl}?x-oss-process=image/resize,w_${125}`" alt="">
                                    </nuxt-link>
                                </div>
                                <div>
                                    <nuxt-link :to="`/community/article/detail/${item.id}`" class="bearm">{{FILTER_FORMATER.wordNum(item.title,16)}}</nuxt-link>
                                    <div class="jymoym">{{item.createDate}}</div>
                                    <div class="jymoys"><span>浏览{{item.browseNum}}次</span><span>评论{{item.commentNum}}次</span></div>
                                </div>
                            </div>
                            <!-- <div class="bear"><div><img class="money" src="~/static/img/qd/bkgrd.png" alt=""></div><div><div class="bearm">实名认证</div><div class="jymoym">奥术阿斯达四大撒大大师阿斯奥术阿斯达四大撒大大师阿斯达四大阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德达四大阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德</div><div class="jymoys">成交2次</div></div></div> -->
                            <!-- <div class="bear"><div><img class="money" src="~/static/img/qd/bkgrd.png" alt=""></div><div><div class="bearm">官方介入</div><div class="jymoym">奥术阿斯达四大撒大大师阿斯达四大阿萨德阿萨德阿萨奥术阿斯达四大撒大大师阿斯达四大阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德德阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德</div><div class="jymoys">成交2次</div></div></div> -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="more-box">
                <nuxt-link class="lookMore" to="/community/article">更多文章</nuxt-link>
            </div>
        </div>

        <!--  -->
        <div class="cp-container">
            <div class="img-fathers">
                <div class="img-box">
                    <img src="../../static/img/sq/build.png" alt="">
                    <span class="become" @click="release">发布圈子</span>
                </div>
                <div class="litil-img">
                    <div class="flexthree-boxs">
                        <!-- <div class="flex-boxs box-one"> -->
                        <!-- <div class="barbear">
                            <div class="oneline">
                                族合族模组
                            </div>
                            <div class="fan">Lorem ipsum cupiditate architecto fugiat maiores temporibus mollitia voluptate! Voluptatem molestias repellat labore veritatis qui, sit eaque voluptatibus ratione pariatur.</div>
                        </div> -->
                        <div class="barbear" v-for="(item,index) in topicList" :key="index">
                            <div class="oneline">
                                <nuxt-link :to="`/community/quan?topicId=${item.id}&t=u`">
                                    <div class="money-img">
                                        <img v-if="item.logo" :src="`${quanfile}${item.logo.fileShowUrl}?x-oss-process=image/resize,w_${75}`" alt="">
                                    </div>
                                    <div>
                                        <div style="color:black;">{{item.topicClassInfo}}</div>
                                    </div>
                                </nuxt-link>
                            </div>
                            <div class="fans"><span>粉丝{{item.followNum}}</span><span class="digital"></span><span>帖子{{item.postNum||0}}</span></div>
                        </div>
                        <!-- </div> -->
                    </div>
                </div>
            </div>
            <div class="more-box">
                <nuxt-link class="lookMore more" to="/community/quan?topicId=49&t=u">更多圈子</nuxt-link>
            </div>
        </div>
        <toLogin :isFlag="isFlag" @callBackDialog="callBackDialogFn"></toLogin>
        <validat-user :isFlag="hasFlag" :isType="hasType" @callBackClose="callBackClose"></validat-user>
    </div>
</template>

<script lang="ts">
import {Component, Vue} from 'nuxt-property-decorator'
import {carouselMap, getstatistics, getCommunityExpertPage, getFirstReceptionPage, getAllTopicList} from '~/api/community/index'
import toLogin from '~/components/common/toLogin.vue'
import validatUser from '~/components/common/validatUser.vue'
// import ValidateLoginConfirm from '~/method/confirm'
import {serQuanFileFileUrl} from '~/../config/server.url.conf'
import {ciipWebUrl} from '~/../config/server.url.conf'
@Component({
    layout: 'community',
    components: {
        toLogin,
        validatUser
    },
    head () {
        return {
            title: 'CIIP社群中心-建筑业交流平台',
            meta: [
                {hid: 'description', name: 'description', content: '社群中心是建筑行业交流平台，在这里轻松获取建筑知识、提高工作效率，而且可以找到一大批建筑同行者。'},
                {hid: 'keyword', name: 'keyword', content: 'CIIP，建筑社群，专家，建筑文章，装配式话题，建筑圈子'}
            ]
        }
    }
})
export default class CommunityIndex extends Vue {
    hasFlag: boolean = false
    hasType: string = ''
    bannerLists:any = [
        {href: '', bg: 'background-image: url(https://ocdevres.ciip.com/ciipResoruce/carousel/20200617/92951414f24c807eb1f1c0356d45e54d.jpg)'}
    ]
    // listImg:any = [{url: '', title: ''}, {url: '', title: ''}, {url: '', title: ''}, {url: '', title: ''}, {url: '', title: ''}]
    str:string = ''
    ocresourceFile:any = this.$store.state.operationUrl
    ciipWebUrl:any = ciipWebUrl
    file:any = this.$store.state.basefile
    indexBannerList:any = []
    numobj:object = {}
    exarr:any = []
    recept:any = []
    topicList:any = []
    isFlag:boolean = false
    loading:boolean = false
    quanfile:any = serQuanFileFileUrl
    mounted () {
        this.carouselMap()
        this.getstatistics()
        this.getCommunityExpertPage()
        this.getFirstReceptionPage()
        this.getAllTopicList()
    }
    async carouselMap () {
        const {data}:any = await carouselMap()
        // console.log(data)
        if (data.code >= 0) {
            this.indexBannerList = data.data
            // console.log(this.indexBannerList)
        }
    }
    async getstatistics () {
        const {data}:any = await getstatistics()
        if (data.code >= 0) {
            this.numobj = data.data
        }
    }
    async getCommunityExpertPage () {
        this.loading = true
        const {data}:any = await getCommunityExpertPage()
        if (data.code >= 0) {
            for (let i = 0; i < data.data.length; i++) {
                data.data[i].city = JSON.parse(data.data[i].city)
            }
            this.exarr = data.data.slice(0, 3)
            this.loading = false
            // console.log('11', data.data)
        }
    }
    async getFirstReceptionPage () {
        const {data}:any = await getFirstReceptionPage({})
        if (data.code >= 0) {
            for (let i = 0; i < data.data.content.length; i++) {
                data.data.content[i].createDate = data.data.content[i].createDate.substring(0, 10)
            }
            this.recept = data.data.content
            // console.log('22', data.data.content)
        }
    }
    async getAllTopicList () {
        const {data}:any = await getAllTopicList()
        const arr = [43, 41, 40, 6, 5, 4]
        const arrs = []
        if (data.code >= 0) {
            // console.log(data.data)
            // data.data.city[0] = JSON.parse(data.data.city[0])
            for (let i = 0; i < data.data.topicClassList.length; i++) {
                // console.log(data.data.topicClassList[i].id)
                if (data.data.topicClassList[i].id) {
                    for (let u = 0; u < arr.length; u++) {
                        if (arr[u] === data.data.topicClassList[i].id) {
                            // console.log(arr[u])
                            // console.log(data.data[i].id)
                            // console.log(data.data[i])
                            arrs.push(data.data.topicClassList[i])
                            arrs.sort((a, b):any => {
                                return b.id - a.id
                            })
                        }
                    }
                }
            }
            // console.log(arrs)
            this.topicList = arrs
        }
    }
    release () {
        this.$router.push({
            path: '/community/quan'
        })
    }
    handleJump (path: string) {
        // const confirm = new ValidateLoginConfirm({
        //     that: this,
        //     path,
        //     disableStr: 'disabled'
        // })
        // confirm.init()
        if (this.$store.state.haslogin) {
            const user: string = this.$store.state.userinfo.selectRoleType
            if (user === 'PERSON') {
                if (this.$store.state.userinfo.realStatus !== 'REAL_STATUS_PASS') {
                    this.hasFlag = true
                    if (path === '/community/article') {
                        this.hasType = 'art'
                    } else if (path === '/community/expert') {
                        this.hasType = 'exp'
                    }
                } else if (this.$store.state.userinfo.realStatus === 'REAL_STATUS_PASS') {
                    if (path === '/community/article') {
                        window.open(this.ciipWebUrl + '/community/article?t=second')
                    } else if (path === '/community/expert') {
                        window.open(this.ciipWebUrl + '/community/expert')
                    }
                }
            } else {
                if (path === '/community/article') {
                    this.$message.error('只有个人用户能发布文章')
                } else {
                    this.$message.error('只有个人用户能成为专家')
                }
            }
        } else {
            this.isFlag = true
        }
    }
    callBackDialogFn (bol: boolean) {
        this.isFlag = bol
    }
    callBackClose (bol: boolean) {
        this.hasFlag = bol
    }
}
</script>
<style lang="scss" scoped>
.fixed{
    position: fixed;
    right: 0px;
    top: 500px;
    z-index: 22;
}
.cp-container{
    .become {
        position: absolute;
        display: inline-block;
        top: 142px;
        left: 40px;
        opacity: 0;
        cursor: pointer;
    }
    .score{
        .ping{
            margin-left: 5px;
            background-color: #ffefdb;
            color: #f5c697;
            text-align: center;
            border-radius: 2px;
            border: 1px solid #ffad4d;
            height: 20px;
            line-height: 10px;
            font-size: 10px;
            padding: 5px;
        }
        .num{
            width: 32px;
            color: #f5c697;
            text-align: center;
            border-radius: 2px;
            border: 1px solid #ffad4d;
            border-left-width: 0px;
            height: 20px;
            line-height: 20px;
        }
        span{
            display: inline-block;
            vertical-align: middle;
        }
    }
    .img-boxs{
            color: black;
            width: 285px;
            height: 405px;
            background-color: #fff;
            position: relative;
            padding: 25px;
            margin-left: 25px;
            // text-align: center;
            .img-size{
                width: 100%;
                height: 100%;
                // margin-bottom: 10px;
            }
            .name-img{
                position: absolute;
                left: 22%;
                z-index: 1;
            }
            .name{
                position: absolute;
                z-index: 2;
                display: block;
                width: 83%;
                height: 45px;
                line-height: 45px;
                text-align: center;
                color: #66bfed;
            }
            .bj{
                float: right;
                top: 15px;
                position: relative;
                font-size: 14px;
                color: #d0d0d0;
            }
            .rel-box{
                // position: relative;
                height: 45px;
                margin-top: 10px;
            }
            .adviser{
                color: black;
                height: 40px;
                line-height: 40px;
                font-size: 16px;
            }
            .content-img{
                width: 230px;
                height: 238px;
                // img{
                //     width: 100%;
                // }
            }
    }
    .img-boxs:hover{
        box-shadow: 0px -5px 5px #eee,
                                    -5px 0px 5px #eee,
                                    5px 0px 5px  #eee,
                                    0px 5px 5px  #eee;
    }
        .img-father{
        display: flex;
        justify-content: space-between;
        padding: 40px 0;
        .img-box{
            width: 285px;
            height: 405px;
            background-color: #ccc;
            position: relative;
            // margin-right: 25px;
        }
    }
        .img-fathers{
        display: flex;
        padding: 15px 0;
        .img-box{
           width: 285px;
            height: 405px;
            background-color: #ccc;
            position: relative;
            margin-right: 25px;
        }
        .litil-img{
            flex: 1;
            background-color: #f4f4f4;
            .flextwo-boxs{
                display: flex;
                flex-direction: column;
                .box-one{
                    background-color: #fff;
                    display: flex;
                    flex-wrap: wrap;
                }
                .flex-boxs{
                    .bear{
                        // border: 1px solid;
                        display: flex;
                        padding: 20px;
                        width: 50%;
                        .imgs-boxs{
                            width: 125px;
                            height: 95px;
                            margin-right: 20px;
                            .money{
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .jymoym{
                            height: 46px;
                            line-height: 46px;
                            font-size: 14px;
                            margin-bottom: 10px;
                            color: #b6b6b6;
                        }
                        .bearm{
                            color: black;
                            font-size: 16px;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 1;
                            overflow: hidden;
                        }
                        .jymoys{
                            font-size: 12px;
                            color: #b6b6b6;
                            span{
                                margin-right: 20px;
                            }
                        }
                        // margin-bottom: 10px;
                        // padding-top: 10px;
                    }
                    .bear:hover {
                        box-shadow: 0px -5px 5px #eee,
                                    -5px 0px 5px #eee,
                                    5px 0px 5px  #eee,
                                    0px 5px 5px  #eee;
                    }
                    // .bear:first-child{
                    //     padding-top: 0px;
                    //     border-top: 0px;
                    //     display: flex;
                    // }
                    // .bear:last-child{
                    //     padding-top: 10px;
                    //     display: flex;
                    //     margin-bottom: 0px;
                    // }
                }
            }
            .flexthree-boxs{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                flex-wrap: wrap;
                background-color: #eeeeee;
                // .flex-boxs{
                    .barbear{
                        border-top: 1px solid #fff;
                        margin: 0px 5px 35px 10px;
                        background-color: #fff;
                        width: 30.5%;
                        height: 183px;
                        .fans{
                            height: 30px;
                            line-height: 30px;
                            padding: 10px;
                            display: flex;
                            justify-content: space-around;
                            span{
                                display: inline-block;
                            }
                            .digital {
                            width: 1px;
                            height: 10px;
                            background-color: #dcdfe6;
                            position: relative;
                            top: 7px;
                            }
                        }
                        .fan{
                            // height: 30px;
                            // line-height: 30px;
                            padding: 10px;
                            // display: flex;
                            // justify-content: space-around;
                        }
                        .oneline{
                            text-align: center;
                            margin-top: 20px;
                            // display: flex;
                            // padding: 7px;
                            .money-img{
                                width: 75px;
                                height: 75px;
                                margin-bottom: 20px;
                                margin: auto;
                                img {
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                        }
                    }
                    .barbear:hover {
                        box-shadow: 0px -5px 5px #eee,
                                    -5px 0px 5px #eee,
                                    5px 0px 5px  #eee,
                                    0px 5px 5px  #eee;
                    }
                // }
            }
        }
    }
    .more-box{
        display: flex;
        justify-content: center;
        padding-bottom: 20px;
        .more{
            margin-top: -20px;
        }
    }
    .lookMore{
        width: 120px;
        height: 40px;
        border-radius: 4px;
        line-height: 40px;
        text-align: center;
        color: #11a9e8;
        cursor: pointer;
    }
}
.cb-content{
    width: 100%;
    height: 225px;
    // line-height: 120px;
    font-size: 32px;
    background-color: #fff;
    // border-bottom: 2px solid #ccc;
    .contents{
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
    div{
            display: flex;
            flex-direction: column;
            span{
                display: inline-block;
            }
            .expert{
                margin-top: 10px;
                font-size: 12px;
                text-align: center;
            }
            .numb{
                margin-top: 30px;
                font-size: 26px;
                color: #11a9e8;
                text-align: center;
            }
        }
    }
    .contents-img{
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        .imgbox{
            color: black;
            margin-top: 25px;
            line-height: 55px;
            display: flex;
            // vertical-align: middle;
            // border: 1px solid;
            padding: 10px 30px;
            .titlesize{
                font-size: 18px;
                margin-left: 10px;
            }
            // img {
            //     width: 100%;
            // }
        }
    }
    .contents-img{
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        .imgbox:hover{
            margin-top: 25px;
            line-height: 55px;
            display: flex;
            // vertical-align: middle;
            // border: 1px solid;
            box-shadow: 0px -5px 5px #eee,
                -5px 0px 5px #eee,
                5px 0px 5px  #eee,
                0px 5px 5px  #eee;
            padding: 10px 30px;
            .titlesize{
                font-size: 18px;
                margin-left: 10px;
            }
        }
    }
}
.cb-banner{
            position: relative;
            height: 420px;
            .ulList{
                position: absolute;
                    z-index: 21111;
                li {
                    list-style: none;
                    font-size: 20px;
                    // position: absolute;
                    float: left;
                    margin-right: 50px;
                    margin-left: 30px;
                    color: #fff;
                    cursor: pointer;
                }
                li:hover {
                    list-style: none;
                    font-size: 20px;
                    // position: absolute;
                    float: left;margin-right: 50px;
                    color: #fff;
                    cursor: pointer;
                    border-bottom: 2px solid #6cc1ee;
                }
            }
            .banner-box{
                position: relative;
                .el-carousel__indicators{
                    bottom: 20px;
                    .el-carousel__button{
                        width: 46px;
                        height: 4px;
                        border-radius: 2px;
                    }
                }
                .el-carousel__arrow{
                    display: none;
                }
                .el-carousel__container{
                    .el-carousel__item{
                        a{
                            width: 100%;
                            height: 100%;
                            display: block;
                            background-position: center;
                        }
                    }
                }
            }
            .banner-bottom{
                width: 100%;
                height: 100px;
                background-color: rgba(1,19,35,0.5);
                position: absolute;
                bottom: 0;
                left: 0;
                overflow: hidden;
                z-index: 99999;
                .cb-container{
                    padding: 0;
                    .el-row{
                        .el-col-8{
                            .nav-i{
                                padding: 20px 0;
                                text-align: center;
                                color: white;
                                /*.i-ico{
                                    background-image: url("../../../static/img/index/index_banner_icon.png");
                                    background-position-x: 0;
                                    background-position-y: 0;
                                    width: 60px;
                                    height: 60px;
                                    display: inline-block;
                                    &.i-ico-c{
                                        background-position-y: -60px;
                                    }
                                    &.i-ico-d{
                                        background-position-y: -120px;
                                    }
                                }*/
                                .i-info{
                                    display: inline-block;
                                    text-align: left;
                                    line-height: 30px;
                                    font-size: 12px;
                                    position: relative;
                                    // @include word-sign-line;
                                }
                                &:hover{
                                    background-color: blue;
                                }
                            }
                        }
                    }
                }
            }
        }
</style>
